<html>
<head>
  <title>Google TV UI Library Demos</title>
  <link rel="stylesheet" href="/static/tv-ui/container.css" type="text/css"/>
  <link rel="stylesheet" href="/static/tv-ui/lightbox.css" type="text/css"/>
  <link rel="stylesheet" href="/static/main.css" type="text/css"/>
  <script src="/static/closure-library-20100917-r305/closure/goog/base.js" type="text/javascript" charset="utf-8"></script>
  <script src="/static/tv-ui/deps.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    goog.require('goog.History');
    goog.require('goog.net.Jsonp');
    goog.require('tv.ui');
    goog.require('tv.ui.Button');
    goog.require('tv.ui.Container');
    goog.require('tv.ui.DecorateHandler');
    goog.require('tv.ui.Document');
    goog.require('tv.ui.Grid');
    goog.require('tv.ui.Input');
    goog.require('tv.ui.Lightbox');
    goog.require('tv.ui.Link');
    goog.require('tv.ui.Menu');
    goog.require('tv.ui.SubMenu');
    goog.require('tv.ui.TabContainer');
    goog.require('tv.ui.ToggleButton');
  </script>
</head>

<body onload="setupHistory()">
  <script type="text/javascript">
    // Global DecorateHandler and History, so demos can hook up
    // its decorate handlers to it.
    var decorateHandler = new tv.ui.DecorateHandler();
    var historyManager;
    var historyHandlers = []
    function setupHistory() {
      window.location.hash = "";
      historyManager = new goog.History(false, undefined,
          goog.dom.getElement('history-token'));
      goog.array.forEach(historyHandlers, function(handler) {
        goog.events.listen(historyManager, goog.history.EventType.NAVIGATE, handler);
      });
      historyManager.setEnabled(true)
    }
  </script>
  <div class="tv-tab-container tv-container-horizontal">
    <div class='tv-tab-container-bar tv-container-vertical demo-selector-nav'>
      <div class="logo">
        <img src="http://www.gstatic.com/tv/ch/icon/google_tv_logo.svg" alt="GoogleTV" width="161" height="45">
      </div>
      {% for demo in demos %}
        <div class='tv-component nav-item'>
          {{demo.title}}
          <div class="background"></div>
        </div>
      {% endfor %}
    </div>
    <div class='tv-tab-container-content tv-container tv-container-stack demo-selector-content'>
      {% for demo in demos %}
        {% include demo.template %}
      {% endfor %}
    </div>
  </div>
  <input type="hidden" id="history-token"/>

  <script type="text/javascript" charset="utf-8">
    var firstNavItem;
    decorateHandler.addClassHandler('nav-item', function(component) {
      if (!firstNavItem) {
        firstNavItem = component;
      }
    });

    tv.ui.postponeRender(function() {
      tv.ui.decorate(document.body, decorateHandler.getHandler());
      firstNavItem.tryFocus();
    });
  </script>
</body>
</html>
